<template>
  <div class="lottery-rules" @click="close">
    <p class="lottery-rules-title">活动规则：</p>
    <ul class="lottery-rules-list">
      <li><p>活动时间：11月3日 20:00 - 11月5日 23.59。</p></li>
      <li><p>每天登陆，即可获得3次抽奖机会。</p></li>
      <li><p>分享活动至微信、QQ和微博，即可获得额外2次抽奖机会。</p></li>
      <li> <p>客服人员将在活动结束后5个工作日内联系获奖用户，并在10个工作日内将奖品寄出。</p></li>
      <li><p>抽奖以登录时手机号为唯一兑奖凭证，请确保输入正确的手机号和保持手机畅通。如在活动结束后5个工作日内客服人员仍无法与获奖用户取得联系，视为放弃奖品。</p>      </li>
    </ul>
    <p class="lottery-rules-title">奖品清单：</p>
    <ul class="lottery-rules-list">
      <li><p>5份《公主披风》重磅版</p></li>
      <li><p>10份《公主披风》EP 精装版</p></li>
      <li><p>50份《公主披风》EP 标准版 </p></li>
      <li><p>50份《公主披风》特别生写</p></li>
      <li><p>25份应援荧光棒</p></li>
      <li><p>50份门票袋</p></li>
      <li><p>500份微鲸VR眼镜</p></li> 
    </ul>
    <p class="lottery-rules-title">温馨提示：</p>
    <ul class="lottery-rules-list">
      <li><p>部分奖品请以实物为准。</p></li>
      <li><p>请勿用非正常手段参与抽奖，否则我方有权取消其中奖资格。</p></li>
      <li><p>如有疑问请加入官方粉丝QQ群170321770，询问管理员。      </p></li>
    </ul>
  </div>
</template>

<script>
  export default {
    methods: {
      close() {
        this.$emit('lottery-rules-close');
      }
    }
  }
</script>
<style lang="scss">
@import "~common/style/variables.scss";
.modal .lottery-rules {
  margin-top: 0.6rem;
  padding: .25rem 0 0;
  height: 12.4rem;
  overflow-y: scroll;
  background: #fff!important;
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  &::-webkit-scrollbar-thumb {
    width: 3px;
    height: 5px;
    background-color: rgba(125,125,125, .25);      
  }
  &::-webkit-scrollbar-track {
    width: 0;
    height: 5px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 100%;
  }
}
.lottery-rules-title {
  padding: .4rem .53rem .3rem;
  margin: 0;
  font-size: .45rem;
  font-weight: bold;
  color: $title-font-active-color;
}
.lottery-rules-list {
  padding: 0 .5rem .3rem .6rem;
  line-height: 1.78;
  color: #b8b8b8;
  border-bottom: 1px solid rgba(125,125,125, .1);
  li {
    list-style-type: square;
    margin-left: .3rem;
    font-size: .15rem;
    font-size: .36rem;
    p {
      font-size: .36rem;
      line-height: 1.5;
    }
  }
  p {
    
    padding: 0;
    margin: 0;
  }
}
</style>
